<template>
  <div class="mysong-container">
    <div class="mysong-top">
      <img :src="playList.coverImgUrl" alt>
      <p>{{playList.name}}</p>
      <div>
        <img :src="creator.avatarUrl" alt>
        <p>{{creator.nickname}}</p>
      </div>
    </div>
    <el-table
      ref="singleTable"
      :data="songsDetail"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" width="80" label="序号"></el-table-column>
      <el-table-column property label="操作" width="80">
        <template slot-scope="scope">
          <i class="el-icon-video-play" @click="play(scope)"></i>
        </template>
      </el-table-column>
      <el-table-column property="name" label="音乐标题" width="180"></el-table-column>
      <el-table-column property="al.name" label="专辑" width="180"></el-table-column>
      <el-table-column property="dt" label="时长" width="120"></el-table-column>
    </el-table>
  </div>
</template>

<script>
// 获取歌单详情
import { getSonglistDetail, getSongsDetail } from "@/api";

export default {
  data() {
    return {
      id:"",
      rid:"",
      playList: [],
      privileges: [],
      creator: {},
      songsDetail: []
    };
  },
  mounted() {
    this.getsongdetail(this.$route.params.id);
  },
  methods: {
    play(scope) {
      // console.log(scope)
      this.id = scope.row.id;
      this.$router.push({
        name: "sing",
        params: { id: this.id, rid: this.playList.id }
      });
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    getsongdetail(data) {
      getSonglistDetail({ id: data }).then(res => {
        this.playList = res.data.playlist;
        this.creator = res.data.playlist.creator;
        this.privileges = res.data.privileges;
        // console.log(this.privileges);
        this.getAlbumsongdetail();
        // console.log(res);
      });
    },
    getAlbumsongdetail() {
      for (let i = 0; i < this.privileges.length; i++) {
        let songId = this.privileges[i].id;
        getSongsDetail({ ids: songId }).then(res => {
          const arr = res.data.songs;
          var dt = arr[0].dt;
          var minute = parseInt(parseInt(dt / 1000) / 60);
          var second = parseInt(dt / 1000) - minute * 60;
          if (minute < 10) {
            minute = "0" + minute;
          }
          if (second < 10) {
            second = "0" + second;
          }
          arr[0].dt = minute + ":" + second; //将转化的时间重新赋值再次进行遍历

          this.songsDetail.push(res.data.songs[0]);
        });
      }
    }
  }
};
</script>

<style>
.mysong-container {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  color: #333;
  overflow: hidden;
}
.mysong-top {
  width: 800px;
  height: 250px;
  padding: 20px 0 0 20px;
  box-sizing: border-box;
  background: rgb(243, 241, 241);
}
.mysong-top img {
  width: 200px;
  height: 200px;
  float: left;
}
.mysong-top > p {
  width: 300px;
  height: 60px;
  float: left;
  margin-top: 10px;
  line-height: 60px;
  text-indent: 20px;
  font-size: 22px;
}
.mysong-top div {
  height: 100px;
  width: 300px;
  overflow: hidden;
}
.mysong-top div img {
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 20px;
}
.mysong-top div p {
  float: left;
  margin: 10px 0 0 20px;
}
</style>